/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

const ImagePicker = require('react-native-image-picker');

export default class App extends Component {

  //选择图片
  _showImagePicker(){

    //配置选项
    const options = {
      title: '选择图片',
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '图库',
      customButtons: [
        {name: 'share photo', title: '分享'},
      ],
      cameraType: 'back',
      mediaType: 'photo',
      videoQuality: 'high',
      durationLimit: 10,
      maxWidth: 300,
      maxHeight: 300,
      quality: 0.8,
      angle: 0,
      allowsEditing: false,
      noData: false,
      storageOptions: {
        skipBackup: true
      }
    };

    //回调数据
    ImagePicker.showImagePicker(options, (response => {
      console.log("response: "+response);
    }))
  }

  //打开相机
  _launchCamera(){

    //配置选项
    const options = {
      cameraType: 'front',  //前置摄像头
      mediaType: 'photo'    //进行拍照
    };

    //回调数据
    ImagePicker.launchCamera(options, (response => {
      console.log("response: "+response);
    }))
  }

  //打开图库
  _launchImageLibrary(){

    //配置选项
    const options = { mediaType: 'photo' };

    //回调数据
    ImagePicker.launchImageLibrary(options, (response => {
      console.log("response: "+response);
    }))
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._showImagePicker.bind(this)}>
          <Text style={{color:'red',fontSize:30}}>选择图片</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this._launchCamera.bind(this)}>
          <Text style={{color:'red',marginTop:30,fontSize:30}}>打开相机</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this._launchImageLibrary.bind(this)}>
          <Text style={{color:'red',marginTop:30,fontSize:30}}>打开图库</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('App', () => App);
